<template>
  <div class="c-fs24 c-wb-ba">
    <div
      class="c-fs24 c-mt30 c-pt30 c-bd-t1"
    >
      <div
        :class="
          moreQue && showmoTest ? '' : 'c-maxh150 c-text-hidden maxMask'
        "
      >
        <div ref="smallProblem" class="c-wb-ba">
          <span class="c-lh34 c-inlineblack c-fc-sblack c-ws-n c-mr8 fl">({{ number+1 }})</span>
          <span
            class="c-lh36 c-fs24 c-lh40 c-fc-sblack imgInlineb problemdDom"
            v-html="problemDate.problem"
          ></span>
        </div>
      </div>
      <div class="c-flex-row c-justify-sb c-w100">
        <div class="c-fs18 c-ph4 c-pv4 c-br8 theme-bd1 theme-bg-10 theme-fc">{{problemDate.type == 1
          ? "单选题"
          : problemDate.type == 2
            ? "多选题"
            : problemDate.type == 3
              ? "简答题"
              : problemDate.type == 4
                ? "判断题"
                : problemDate.type == 5
                  ? "填空题"
                  : problemDate.type == 9?'阅读理解': ""}}</div>
        <div
          v-if="showmoTest"
          class="c-fc-mblue c-fs20"
          @click="showMoreQue"
        >
          {{ moreQue ? "收起" : "展开"
          }}
        </div>
      </div>
      <single-problem :questionInfo="problemDate"></single-problem>
    </div>
  </div>
</template>
<script>
let moreTimeControl = null
import singleProblem from "@/components/templates/schoolAssignment/singleProblem.vue";
export default {
  name: "problem",
  components: {
    singleProblem,
  },
  props: {
    problemDate: {
      type: Object,
      default: () => {}
    },
    number: {
      type: Number,
      default: 0
    },
  },
  watch: {
    problemDate(val) {
      console.log(val)
      if (val) {
        moreTimeControl = setTimeout(() => {
          if (!!this.$refs.smallProblem && this.$refs.smallProblem.offsetHeight < 80) {
            this.showmoTest = false
          } else {
            this.showmoTest = true
          }
        }, 400)
      }
    }
  },
  data() {
    return {
      showmoTest:false,
      moreQue:false,
    };
  },
  methods: {
    showMoreQue() {
      this.moreQue = !this.moreQue
    }
  },
  destroyed() {
    clearInterval(moreTimeControl)
  }
};
</script>

<style scoped>
.imgInlineb  /deep/ img{display: inline-block;vertical-align: middle;}
.problemdDom /deep/ img{
  display: inline-block;
  vertical-align: middle;
}
.problemdDom /deep/ p{
  text-align: left!important;
}
.problemdDom /deep/ p img{
  display: block;
}
.problemdDom /deep/ .wscnph{
  display: block;
}
.maxMask {
  mask-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.7) 10%,
    rgba(255, 255, 255, 1) 15%,
    rgba(255, 255, 255, 1) 100%
  );
}
</style>
